<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <div>
    <div class="abstatic-height"></div>
    <div class="app-container calendar-list-container">
      <div class="record-top-wrap">
        <div class="record-items-left">
          <div class="record-item line-with-verticl">
            <div class="over-topline line-with-verticl"></div>
            <span class="li_box">
                <p><i><icon-svg icon-class="real" style="fill:rgba(80, 227, 194, 0.3)"/></i>真实火警</p>
                <h1 style="color: rgba(219, 54, 29, 1)">{{countList.realFire}}</h1>
              </span>
          </div>
          <div class="record-item line-with-verticl">
            <div class="over-topline line-with-verticl"></div>
            <span class="li_box">
                <p><i><icon-svg icon-class="wubao" style="fill:rgba(80, 227, 194, 0.3)"/></i>误报火警</p>
                <h1 style="color: rgba(80, 227, 194, 1)">{{countList.falseFire}}</h1>
              </span>
          </div>
          <div class="record-item line-with-verticl">
            <div class="over-topline line-with-verticl"></div>
            <span class="li_box">
                <p><i><icon-svg icon-class="abnormal" style="fill:rgba(80, 227, 194, 0.3)"/></i>故障报警</p>
                <h1 style="color: rgba(245, 166, 35, 1)">{{countList.faultAlarm}}</h1>
              </span>
          </div>
        </div>
        <div class="record-items-right">
          <p class="chart-title"><i class="el-icon-caret-right"></i>报警趋势</p>
          <div id="record_chart"></div>
        </div>
      </div>
      <el-row style="padding-top: 30px;">
        <el-radio-group v-model="radioType" @change="switchTable">
          <el-radio-button label="now">当前报警</el-radio-button>
          <el-radio-button label="Fire_alarm">火警处理记录</el-radio-button>
          <el-radio-button label="fault">故障处理记录</el-radio-button>
        </el-radio-group>
        <div class="search">
          <span style="font-size: 14px;">报警类型</span>
          <el-select v-model="listQuery.alrmType" filterable placeholder="请选择" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="(item,index) in alrmTypeList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <span style="font-size: 14px;margin-left: 20px;">报警时间</span>
          <el-date-picker v-model="listQuery.dateStrs" value-format="yyyy-MM-dd" type="daterange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" style="width:240px;" size="mini"></el-date-picker>
          <el-button class="filter-item" type="primary" :disabled="isadvance" @click="handleFilter" size="mini">查询</el-button>
          <el-popover
            placement="bottom"
            v-model="isadvance"
            width="680"
            trigger="click">
            <el-button class="filter-item"  type="text" size="mini" slot="reference" @click.stop="isadvance=true">高级查询</el-button>
            <div class="xf-double-form">
                <div class="xf-dbform-item">
                  <div class="xf-dbform-item__sleft">
                    <p class="xf-dbform-item__label">建筑名</p>
                    <el-select v-model="formLabelAlign.bName" filterable placeholder="全部" style="width: 100%;">
                      <el-option v-for="(item,index) in buildList" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                  </div>
                  <div class="xf-dbform-item__sright">
                    <p class="xf-dbform-item__label">消防主机ID</p>
                    <el-input v-model.trim="formLabelAlign.fireMainId" placeholder="请输入消防主机ID"></el-input>
                  </div>
              </div>
              <div class="xf-dbform-item">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">回路</p>
                  <el-input v-model.trim="formLabelAlign.sensorLoop" placeholder="请输入回路"></el-input>
                </div>
                <div class="xf-dbform-item__sright">
                  <p class="xf-dbform-item__label">地址</p>
                  <el-input v-model.trim="formLabelAlign.address" placeholder="请输入地址"></el-input>
                </div>
              </div>
              <div class="xf-dbform-item">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">系列</p>
                  <el-input v-model.trim="formLabelAlign.series" placeholder="请输入系列"></el-input>
                </div>
                <div class="xf-dbform-item__sright">
                  <p class="xf-dbform-item__label">楼层</p>
                  <el-input v-model.trim="formLabelAlign.floorId" placeholder="请输入楼层"></el-input>
                </div>
              </div>
              <div class="xf-dbform-item">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">位置描述</p>
                  <el-input v-model.trim="formLabelAlign.positionDescription" placeholder="请输入位置描述"></el-input>
                </div>
                <div class="xf-dbform-item__sright" v-show="radioType==='Fire_alarm'||radioType==='fault'">
                  <p class="xf-dbform-item__label">处理人</p>
                  <el-input v-model.trim="formLabelAlign.handlePerson" placeholder="请输入处理人"></el-input>
                </div>
              </div>
              <div class="xf-dbform-item" v-show="radioType==='Fire_alarm'||radioType==='fault'">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">处理时间</p>
                  <el-date-picker
                    v-model="formLabelAlign.handleDateStrs"
                    type="daterange"
                    range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
            </div>
            <div style="text-align: left; margin: 0; margin-top:20px;">
              <el-button type="primary" @click="handleAdvaceSerach" size="mini">查询</el-button>
              <el-button @click="isadvance = false" type="text" size="mini">取消</el-button>
            </div>
          </el-popover>
        </div>
        <el-table :data="list" :key="tableKey"  v-loading.body="listLoading" style="width: 100%;">
          <el-table-column label="建筑名">
            <template slot-scope="scope">
              <span>{{scope.row.bName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="消防主机ID">
            <template slot-scope="scope">
              <span>{{scope.row.fireMainId}}</span>
            </template>
          </el-table-column>
          <el-table-column label="回路">
            <template slot-scope="scope">
              <span>{{scope.row.sensorLoop}}</span>
            </template>
          </el-table-column>
          <el-table-column label="地址">
            <template slot-scope="scope">
              <span>{{scope.row.address}}</span>
            </template>
          </el-table-column>
          <el-table-column label="系列">
            <template slot-scope="scope">
              <span>{{scope.row.series}}</span>
            </template>
          </el-table-column>
          <el-table-column label="楼层">
            <template slot-scope="scope">
              <span>{{scope.row.floor}}</span>
            </template>
          </el-table-column>
          <el-table-column label="位置描述">
            <template slot-scope="scope">
              <span>{{scope.row.positionDescription}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平面图" v-if="planSetup==1">
            <template slot-scope="scope">
              <span class="img" @click="viewimg(scope.row,scope.row.floor)">查看平面图</span>
            </template>
          </el-table-column>
          <el-table-column label="报警类型">
            <template slot-scope="scope">
              <span :class="{ fire:scope.row.alrmCategory==1 ,break:scope.row.alrmCategory==0 }">{{scope.row.alrmType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="报警时间">
            <template slot-scope="scope">
              <span>{{scope.row.alrmDate}}</span>
            </template>
          </el-table-column>
          <!-- row1 -->
          <el-table-column label="处理人" v-if="radioType==='Fire_alarm'">
            <template slot-scope="scope">
              <span>{{scope.row.handlePerson}}</span>
            </template>
          </el-table-column>
          <el-table-column label="处理人" v-if="radioType==='fault'">
            <template slot-scope="scope">
              <span>{{scope.row.handlePerson}}</span>
            </template>
          </el-table-column>
          <el-table-column label="处理时间" v-if="radioType==='Fire_alarm'">
            <template slot-scope="scope">
              <span>{{scope.row.handleDate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="处理时间" v-if="radioType==='fault'">
            <template slot-scope="scope">
              <span>{{scope.row.handleDate}}</span>
            </template>
          </el-table-column>
          <!-- row1 -->
          <el-table-column label="处理结果" v-if="radioType==='Fire_alarm'">
            <template slot-scope="scope">
              <span>{{scope.row.fireFlag==1?'真实火警':(scope.row.fireFlag==2?"火警测试":"误报")}}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否处理" fixed="right" v-if="radioType==='now'">
            <template slot-scope="scope">
              <el-button type="text" @click="handleAlarm(scope.row)">处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[15,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="listQuery.tag==0?total:(listQuery.tag==1?totalfire:totalbreak)"> </el-pagination>
      </div>

    </div>
    <planDialog :Show.sync="realtimePointShow" :buildId.sync="buildId" :channelId.sync="params.channelId" :newfloor.sync="newfloor"></planDialog>

    <el-dialog title="处理提示"
               :visible.sync="isdelalram"
               :show-close='false'
               :close-on-click-modal='false'
               :close-on-press-escape='false'
               custom-class="xf-jc-dialog" width="360px" height="160px">
      <div class="xf-jc-deletect">
        <el-radio-group v-model="switchalramtype" v-if="alarmtype==1">
          <el-radio label="1">真实火警</el-radio>
          <el-radio label="2">火警测试</el-radio>
          <el-radio label="0">误报</el-radio>
        </el-radio-group>
        <p v-else>当前故障确认已处理吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="handleSure">确定</el-button>
        <el-button type="text" size="mini" @click="isdelalram=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import clip from '@/utils/clipboard' // use clipboard directly

  import planDialog from '@/views/device/fireMainframe/components/realtimePoints';
  import {
    getRecordList,
    selectCount,
    selectCountChart,
    selectAlrmType,
    selectBuild,
    changeFireRsolve
  } from "@/api/device/deviceFireMain/index";

  export default {
    components: {planDialog},
    data() {
      return {
        tableKey:0,
        isdelalram:false,
        realtimePointShow:false,
        switchalramtype:'1',
        radioType: 'now',
        countList:'',
        alrmTypeList: [],
        buildList: '',
        isadvance:false,
        list: [],
        total: null,
        totalfire:null,
        totalbreak:null,
        listLoading: true,
        pickerOptions:{
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        alarmtype:'',
        listQuery: {
          page: 1,
          limit: 15,
          tag:0,
          alrmType:"",
          dateStrs:null,
        },
        count: '',
        form: {
          name: '',
          region: '',
          type: ''
        },
        formLabelAlign: {
          bName: '全部',
          fireMainId: null,
          sensorLoop: null,
          floorId: null,
          positionDescription: null,
          address: null,
          series: null,
          handlePerson:null,
          handleDateStrs:'',
        },
        params:{
          channelId:"",
        },
        buildId:"",
        newfloor:1,
        planSetup:"0"
      }
    },
    mounted() {
      this.fetchData();
    },
    methods: {
      fetchData(){
        let vm = this;
        vm.params.channelId=vm.$route.params.id;
        vm.listQuery.dateStrs=null;
        vm.type({alrmCategory:"",handleFlag:""});
        vm.getList();
        vm.buildCount();
        vm.initChart();
        this.$store.dispatch("getImgAuth").then(()=>{
          this.planSetup=this.$store.getters.planSetup;
        })
      },
      handleCopy(text, event) {
        clip(text+'', event)
      },
      changeSwitch(val){
        changeFireRsolve(val.id).then((res)=>{
          if(res.status===200){
            this.$notify({
              title: "成功",
              message: "处理成功",
              type: "success",
              duration: 2000
            });
          }

        })
      },
      handleAlarm(row){
        this.rowdata=row;
        this.alarmtype=row.alrmCategory;
        this.isdelalram=true;
      },
      handleSure(){
        changeFireRsolve(this.$qs.stringify({id:this.rowdata.id,flag:this.switchalramtype})).then(res=>{
          if(res.status===200){
            this.$notify({
              title: "成功",
              message: "处理成功",
              type: "success",
              duration: 2000
            });
            this.isdelalram=false;
            this.getList();
          }
        }).catch(res=>{
          this.$notify({
            title: "提示",
            message: "网络异常！",
            type: "warning",
            duration: 2000
          });
          this.isdelalram=false;
        })
      },
      //报警类型
      type(type) {
        let alarmtype=type||{};
        selectAlrmType(Object.assign({},this.listQuery,this.params,alarmtype)).then((res)=> {
          this.alrmTypeList = res.data;
        })
      },
      //饼状图
      initChart() {
        selectCount(Object.assign({},this.listQuery,this.params)).then((res)=> {
            // console.log(res.data);
            this.countList = res.data;
            selectCountChart(this.params).then((res) => {
                let charData = res.data;
                var chart = echarts.init(document.getElementById('record_chart'));
                var option = {
                    grid: {
                        left: '10%',
                        right: 65,
                        bottom: 20,
                        top: 20
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        icon: 'line',
                        orient: 'vertical',
                        textStyle: {
                            color: 'rgba(80, 227, 194, 0.7)'
                        },
                        itemHeight: 3,
                        left: 'right',
                        top: 'top',
                        data: ['火警', '误报', '故障']
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: charData.months,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(80, 227, 194, 0.3)"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(80, 227, 194, 0.3)"
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(80, 227, 194, 0.3)'
                            }
                        }
                    },
                    color: ['#E4393C', '#1ABC9C', '#FFAF40'],
                    series: [
                        {
                            type: 'line',
                            name: '火警',
                            smooth: true,
                            symbol: 'none',
                            showAllSymbol: true,
                            sampling: 'average',
                            itemStyle: {
                                normal: {
                                    color: '#E4393C'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#E4393C'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0,0,0,0)'
                                    }])
                                }
                            },
                            data: charData.alarmCount
                        },
                        {
                            type: 'line',
                            name: '误报',
                            smooth: true,
                            symbol: 'none',
                            showAllSymbol: true,
                            sampling: 'average',
                            itemStyle: {
                                normal: {
                                    color: '#1ABC9C'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#1ABC9C'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0,0,0,0)'
                                    }])
                                }
                            },
                            data: charData.notAlarmCount
                        },
                        {
                            type: 'line',
                            smooth: true,
                            symbol: 'none',
                            name: '故障',
                            showAllSymbol: true,
                            sampling: 'average',
                            itemStyle: {
                                normal: {
                                    color: '#FFAF40'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#FFAF40'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0,0,0,0)'
                                    }])
                                }
                            },
                            data: charData.faultCount
                        }
                    ]
                };
                chart.setOption(option);
            })
        })
      },
      switchTable() {
        // 切换按钮时重置分页查询条件
        this.listQuery.type = undefined;
        this.listQuery.alrmType = "";
        this.listQuery.dateStrs=null;
        this.resetAdvanc();
        if(this.radioType === 'now') {
          this.listQuery.tag =0;
          this.listQuery.limit=15;
          this.listQuery.page=1;
          this.tableKey = 0;
          this.getList();
          this.type({alrmCategory:"",handleFlag:""});
        }else if(this.radioType === 'Fire_alarm') {
          this.listQuery.tag = 1;
          this.listQuery.limit=15;
          this.listQuery.page=1;
          this.tableKey = 1;
          this.getList();
          this.type({alrmCategory:"1",handleFlag:"1"});
        }else {
          this.listQuery.tag = 2;
          this.listQuery.limit=15;
          this.listQuery.page=1;
          this.tableKey = 2;
          this.getList();
          this.type({alrmCategory:"0",handleFlag:"1"});
        }
      },
      //获取表格所有的内容
      getList() {
        this.listLoading = true;
        let dateStrs;
        this.list = [];
        this.listfire =[];
        this.listbreak = [];
        let hddateStr =  JSON.parse(JSON.stringify(String(this.formLabelAlign.handleDateStrs)));
        if(this.listQuery.dateStrs){
          dateStrs = (this.listQuery.dateStrs).toString();
        }
         let contactKeys = Object.assign({},JSON.parse(JSON.stringify(this.listQuery)),{dateStrs:dateStrs},JSON.parse(JSON.stringify(this.formLabelAlign)),{handleDateStrs:hddateStr});
        getRecordList(contactKeys).then(response => {
          if (this.listQuery.tag==0) {
            this.total = response.data.total;
            this.listLoading = false;
          }else if(this.listQuery.tag==1){
            this.totalfire = response.data.total;
            this.listLoading = false;
          }else{
            this.totalbreak = response.data.total;
            this.listLoading = false;
          }
          this.list = response.data.rows;
        });
      },
      //高级查询条件-建筑物
      buildCount() {
        selectBuild(Object.assign({},this.listQuery,this.params)).then(res=>{
          this.buildList = res.data.bname;
        })
      },
      //根据类型,时间查询
      handleFilter() {
        this.resetAdvanc();
        this.getList();

      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      resetAdvanc(){
      //  重置高级查询条件
          this.formLabelAlign.bName = '全部';
          this.formLabelAlign.fireMainId = undefined;
          this.formLabelAlign.sensorLoop =  undefined;
          this.formLabelAlign.floorId = undefined;
          this.formLabelAlign.positionDescription = undefined;
          this.formLabelAlign.address =  undefined;
          this.formLabelAlign.series =  undefined;
          this.formLabelAlign.handlePerson = undefined;
          this.formLabelAlign.handleDateStrs = '';
      },
      //高级查询里面的查询
      handleAdvaceSerach(){
        this.isadvance = false;
        this.listLoading = true;
         this.listQuery.page = 1;
        let hddateStr =  JSON.parse(JSON.stringify(String(this.formLabelAlign.handleDateStrs)));
        let dateStr =  JSON.parse(JSON.stringify(String(this.listQuery.dateStrs)));
        // 取消绑定并合并查询条件
        let contactKeys = Object.assign({},JSON.parse(JSON.stringify(this.listQuery)),{dateStrs:dateStr},JSON.parse(JSON.stringify(this.formLabelAlign)),{handleDateStrs:hddateStr});
        getRecordList(contactKeys).then(response => {
          if (this.listQuery.tag==0) {
            this.total = response.data.total;
            this.listLoading = false;
          }else if(this.listQuery.tag==1){
            this.totalfire = response.data.total;
            this.listLoading = false;
          }else{
            this.totalbreak = response.data.total;
            this.listLoading = false;
          }
          this.list = response.data.rows;
        });
      },
      viewimg(row,floor){
        this.buildId=row.buildId+"";
        this.newfloor=floor;
        this.realtimePointShow=true;
      },
      //表格的颜色
      tableRowClassName({row, rowIndex}) {
        return ''
      },
    },
    watch:{
      '$route':'fetchData'
    }

  }
</script>

<style lang="scss" rel="stylesheet/scss">
  // 精准查询
  .xf-double-form{
    .xf-dbform-item{
      display: flex;
      justify-content: space-between;
      .xf-dbform-item__sleft{
        .el-input{
          width: 320px;
        }
      }
      .xf-dbform-item__sright{
        .el-input{
          width: 320px;
        }
      }
    }
  }
  .calendar-list-container {
    .icon-nf-copy{
      cursor: pointer;
      position: relative;
      .icon-nf-copy-btn{
        position: absolute;
        opacity: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
    .filter-container {
      display: flex;
      justify-content: space-between;
      .title {
        color: rgb(129, 128, 128);
      }
    }
    .fire{
      color:#E4393C;
    }
    .break{
      color:#FFAF40;
    }
    .el-main {
      border-radius: 4px;
      overflow: hidden;
      ul{
        width:100%;
        height: 100%;
        padding: 0;
        margin: 0;
        position: relative;
        display: flex;
        .right {
          color:#999;
          font-size:12px;
          position: absolute;
          right: 10px;
          top: 10px;
        }
      }
      li {
        list-style: none;
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        span,p {
          display: inline-block;
        }
        .true-color {
          width:17px;
          height: 14px;
          border-radius: 3px;
          background-color: #E4393C;
        }
        .false-color {
          width:17px;
          height: 14px;
          border-radius: 3px;
          background-color:#1ABC9C;
        }
        .fault-color {
          width:17px;
          height: 14px;
          border-radius: 3px;
          background-color:#FFAF40;
        }
        h1 {
          margin: 0;
          font-size: 36px;
        }
        .table_pie {
          width: 100%;
          height: 100%;
        }

      }
    }
    .el-switch {
      height: 22px;
    }
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
    .el-table th {
      background: #f5f7fa;
    }
    .search {
      float: right;
    }
    .img {
      cursor: pointer;
    }
    .search {
      //   position: absolute;
      //   right: 0;
      //   top: 30px;
      float: right;
    }

  }
</style>
